<template>
  <div class='container'>
      <el-upload 
      list-type="picture-card" 
      :file-list="fileList" 
      :on-preview="preview" 
      :on-remove="removeImage"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
      :limit="1"
      action="#"
      :class="{disabled: fileComputed }"
      >
          <i class="el-icon-plus"></i>
      </el-upload>
      <el-progress v-if="showPercent" style="width: 180px" :percentage="percent" />

      <!-- 弹出预览 -->
      <el-dialog :visible.sync="showDailog" title="图片预览">
          <img :src="imgUrl" style=" width: 100% " >
      </el-dialog>
  </div>
</template>

<script>
// 上传腾讯云插件
import Cos from 'cos-js-sdk-v5'
const cos = new Cos({
    SecretId:'AKIDax7F96fpogIqiKBZ6kBMJBAvPdf6ZDz6',
    SecretKey:'3whaGgpSt5HED1ZqKjurHUQ4RZLp20nK'
})
export default {
    name:'My-ImageUpload',
    computed: {
    
    fileComputed() {
      return this.fileList.length === 1
    }
  },
    data() {
        return {
            fileList:[],
            imgUrl:'',
            showDailog:false,
            // 显示进度条控件
            showPercent:false,
            // 进度条数值
            percent:0
        }
    },
    methods:{
        // 预览图片
        preview(file) {
            // console.log(file);
            
            this.imgUrl = file.url
            this.showDailog = true
            
        },
        // 删除图片
        removeImage(file) {
            
            this.fileList = this.fileList.filter(item => item.uid !== file.uid)
        },
        
        changeFile( file, fileList) {
            this.fileList = fileList.map(item => item)
        },
        // 上传之前的检查
        beforeUpload(file) {
            // 文件类型
            const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
            if(!types.includes(file.type)){
                this.$message.error('上传图片只能是jpeg gif bmp png 格式')
                return false
            }
            // 文件大小
            const maxSize = 5*1024*1024
            if(maxSize < file.size){
                this.$message.error('图片最大的大小为5M')
                return false
            }
            // 满足条件
            this.showPercent = true

            return true
        },
        // 上传到腾讯云
        upload(params){
            // console.log(params);
            if(params.file){
                // 上传到腾讯云
                cos.putObject(
                    {
                        // 存储桶名称
                    Bucket:'firstuse-1305027925',
                        // 存储桶所在地域
                    Region:'ap-nanjing',
                        // 文件名称
                    Key: params.file.name,
                        // 标准值
                    StorageClass:'STANDARD',
                        // 上传文件的内容 
                    Body: params.file,
                    // 进度回调函数
                    onProgress: (progressData) => {
                       this.percent = progressData.percent*100
                    }
                },(err, data) => {
                    // console.log(err || data);
                    if(data.statusCode === 200 && data.Location){

                        this.fileList = this.fileList.map(item => {
                            // 将本地的地址替换成线上(腾讯云)地址
                           if(item.uid === params.file.uid ){
                               // params.file.url没有http协议头，需要手动加上
                               // upload 设置为true表示上传成功
                               return { url: 'http://' + data.Location, upload:true }
                           }
                           return item
                       }) 
                       setTimeout(() => {

                           this.showPercent = false
                           this.percent = 0
                       },1000)
                    }
                }
                )
            }
        }
    }
}
</script>

<style  lang='scss'>
    .disabled .el-upload--picture-card {
        display: none
     }
</style>